<template>
  <div class="health">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">{{Data.name}}</span>
      <span class="header-wrap-right">
      </span>
    </div>
    <div class="health-content">
    <!-- <div style="margin-left:.3rem;color:red;font-weight:bold;">注意：所展示列表均为必填</div> -->
    <!-- <span class="header-wrap-text">sss</span> -->
    <div class="objbox" >
      <div v-for="(item,index)  in Data.html" :key="index">
        <div  v-if="item.type==0">
          <div>
            <div class="text">{{item.text}}</div>
            <div class="health-list">
              <van-field @input ='fninput(item.model,item.name)' clearable v-model="item.model"  :placeholder="'请输入'+item.placeholder" />
            </div>
          </div>
        </div>
        <div v-if="item.type==2">
          <van-radio-group v-model="item.options.value">
            <div style="font-weight:bold;height:.5rem;line-height:.5rem;text-align: center; color:#ee5a8a;margin-top: .2rem;">{{item.text}}</div>
            <div v-for="(list,index) in item.options" :key="index">
              <van-cell-group @click="Fncell(list.value,item.name)" >
                <van-cell :title=list.text clickable >
                  <van-radio  slot="right-icon" :name ='list.value'/>
                </van-cell>
              </van-cell-group> 
            </div>
          </van-radio-group>
        </div>
        <!-- 多选 -->
        <div  v-if="item.type==3">
          <div class="text">{{item.text}}</div>
          <van-checkbox-group v-for="(list,index) in item.options" :key="index" v-model="result" @change='change(list.value,item.name,result)'>
            <van-cell-group>
              <van-cell

                clickable
                :title="list.text"
              >
                <template #right-icon>
                  <van-checkbox @click.native="toggle(index)"  :name="list.value" ref="checkboxes" v-model="checked" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </div>
        <div v-if="item.type==5" style="margin:.5rem .2rem 0">
          <div class="text" style="margin-bottom:.1rem;" >{{item.text}}</div>
          <van-uploader v-model="imgList" :max-count="8"/>
        </div>
      </div>
      <!-- 确定 -->
      <div v-if="showButton" class="health-content" style="margin: .7rem .3rem .5rem;">
        <div class="submit" @click="addlist()">
          确定
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
import { Field,RadioGroup,Radio,Uploader,Cell,CellGroup,Checkbox,CheckboxGroup } from 'vant';
import api from '../../../api/api.js'
export default {
  props:{
		message:{
			type: Object
		}
  },
  data(){
    return{
      field:'',
      fields:[],
      imgList:[],
      fileList: [],
      avatar:[],
      htmlData:[],
      Data:{},
      result: [],
      strData:[],
      strData1:[],
      allValue:[],
      checked:false,
      showButton:false,
      fieldsValue:[],
  }
},
watch: {
    //父组件的值html看起来能渲染出来，实际它之前渲染过一次空的了，所以要监听
    message(val, oldVal) {
      if (val !== oldVal) {
        this.Data= this.message
        this.showButton = true
      }
    },
},
  created(){
    this.Data = this.message
  },
  methods:{
    change(value,name,names){
      // console.log(value,name,names)
      this.fieldsValue[name] = value = names.join()
    },
    fninput(value,name){
      this.fieldsValue[name]=value
    },
    Fncell(value,name){
      this.fieldsValue[name]=value
    },
    goback(){
      this.$emit('getshow')
      this.menu()
    },
     menu(){
      window.scrollTo(0, 0)
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    addlist(){
      // console.log(this.imgList)
      // return
      if(this.imgList.length!=0){
          this.imgList.map((element, index) => {
        // 创建Canvas对象(画布)
          let canvas =  document.createElement('canvas')
          // 获取对应的CanvasRenderingContext2D对象(画笔)
          let context = canvas.getContext('2d')
          // 创建新的图片对象
          let img = new Image()
          // 指定图片的DataURL(图片的base64编码数据)
          img.src = element.content
          // 监听浏览器加载图片完成，然后进行进行绘制
          img.onload = () => {
            // 指定canvas画布大小，该大小为最后生成图片的大小
            canvas.width = 450
            canvas.height = 350
            /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
            如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
            context.drawImage(img, 0, 0, 450, 350)
            // 将绘制完成的图片重新转化为base64编码，element.file.type为图片类型，0.92为默认压缩质量
            element.content = canvas.toDataURL(element.file.type,0.92)
            // 最后将base64编码的图片保存到数组中，留待上传。
            this.avatar.push(element.content)
          }
        })
        this.upload()
      }else{
        this.upload1()
      }

    },
    //上传
    upload(){
    this.$post(api.upload, {
      base64:this.avatar
    })
    .then((response) => {
      if(response.data.code==1){
        this.fileList = response.data.data.urls
        // 提交时候后台需要的参数
        var data ={
          images:this.fileList,
          opinion_id:this.Data.id,
          residential_id:this.Data.residential_id,
        };
        this.Data.html.forEach((element,index) => {
          var field = element.name
          console.log(field + "=" + this.fieldsValue[field])
          data[field]=this.fieldsValue[field]
        });
        console.log(data)
         this.$post(api.addopinionrows, data)
        .then((response) => {
          if(response.data.code==1){
            this.$toast('提交成功')
            setTimeout(() => {
              window.location.reload()
            }, 1500);
          }else if(response.data.code==0){
            this.$toast(response.data.msg)
          }
        })
        .catch((error) => {
          console.log(error);
        });
      }
    })
    },
    upload1(){
        // 提交时候后台需要的参数
        var data ={
          images:this.fileList,
          opinion_id:this.Data.id,
          residential_id:this.Data.residential_id,
        };
        this.Data.html.forEach((element,index) => {
          var field = element.name
          console.log(field + "=" + this.fieldsValue[field])
          data[field]=this.fieldsValue[field]
        });
        console.log(data)
         this.$post(api.addopinionrows, data)
        .then((response) => {
          if(response.data.code==1){
            this.$toast('提交成功')
            setTimeout(() => {
              window.location.reload()
            }, 1500);
          }else if(response.data.code==0){
            this.$toast(response.data.msg)
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  components: {
    [Field.name]:Field,
    [RadioGroup.name]:RadioGroup,
    [Radio.name]:Radio,
    [Cell.name]:Cell,
    [Uploader.name]:Uploader,
    [Checkbox.name]:Checkbox,
    [CellGroup.name]:CellGroup,
    [CheckboxGroup.name]:CheckboxGroup
  }
}
</script>
<style>
.van-cell-group{
  background: none;
}
.van-uploader__upload{
  width: 1.2rem;
  height: 1.2rem;
  background-color: #fff;
  border-radius: 0.12rem;
  border: 1px solid #57c5c6;
}
.van-uploader__preview-image{
  width: 1.2rem;
  height: 1.2rem;
}
.van-uploader__preview,.van-uploader__upload{
  margin: 0 .2rem .2rem .2rem;
}
.van-uploader__upload-icon{
  color: #000;
  font-size: .6rem;
}
.van-icon-delete:before{
  content: "\F041";
}

</style>
<style scoped>
.van-dialog{
  width: 75%;
}
.health-content{
  margin: 1rem 0 0;
  color: #000;
}
.health-title{
  display: inline-block;
  margin-bottom: .2rem;
  font-size: .3rem;
  flex:3;
  color: #FD5585;
}
.health-list{
  margin: .2rem 0rem;
  background: #fff;
  display: flex;
  /* width: 100%; */
  height: .8rem;
  line-height: .8rem;
  /* border-radius: .5rem; */
  border-bottom: 0.02rem solid #ddd;
}
.health-list span:nth-of-type(1){
  text-indent: .35rem;
  flex: 6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.health-list span:nth-of-type(2){
  text-align: center;
  flex: 1;
}
.submit{
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .45rem;
  text-align: center;
  font-weight: bold;
}
.delPeople{
  width: 100%;
  height: auto;
  text-align: right;
}
.delPeople span{
  margin: .1rem;
  padding:.02rem .1rem;
  color: red;
  display: inline-block;
  border: 1px solid red;
  border-radius: .1rem;
}
.objbox{
  border: .02rem solid #ccc;
  margin: .2rem .3rem .2rem;
  border-radius: .1rem;
  overflow: hidden;
  background: #fff;
}
.titlePeoPle{
  font-size: .3rem;
  height: .7rem;
  line-height: 1rem;
  color: #1989fa;
  text-align: center;
}
.text{
  display: block;
  text-align: center;
  margin-top: .2rem;
  color:#ee5a8a;
  font-weight: bold;
}
</style>
